<template>
  <div class="authorize-container">
    <div class="flex-row">
      <!-- 左侧角色列表 -->
      <div class="left-column">
        <Card>
          <List
            class="role-list"
            :loading="store.loadingRoles"
            :dataSource="store.roleNodes"
            :rowKey="(item) => item.id.toString()"
          >
            <template #renderItem="{ item }">
              <ListItem>
                <div
                  class="role-item"
                  :class="{
                    'role-item-active': store.selectedRoleId === item.id,
                  }"
                  @click="store.handleRoleSelect(item)"
                >
                  {{ item.name }}
                </div>
              </ListItem>
            </template>
          </List>
        </Card>
      </div>

      <!-- 右侧资源授权表格 -->
      <div class="right-column">
        <Card>
          <RoleAuthorizeTable
            :selected-role="store.selectedRole"
            @update:grid-api="onGridApiUpdate"
          />
        </Card>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted } from 'vue';
import { Card, List, ListItem } from 'ant-design-vue';
import RoleAuthorizeTable from './role-authorize.table.vue';
import type { ExtendedVxeGridApi } from '#/adapter/vxe-table';
import { useRoleAuthorizeStore } from '#/store/daprplus/role-authorize';

const store = useRoleAuthorizeStore();

let gridApi: ExtendedVxeGridApi;

function onGridApiUpdate(api: ExtendedVxeGridApi) {
  gridApi = api;
}

// 页面加载时获取角色列表
onMounted(() => {
  store.loadRoleNodes();
});
</script>

<style scoped>
.ant-list-item {
  padding: 5px;
}
.authorize-container {
  padding: 16px;
}

.flex-row {
  display: flex;
  flex-direction: row;
  gap: 16px;
  width: 100%;
}

.left-column {
  width: 180px;
  min-width: 180px;
  flex-shrink: 0;
}

.right-column {
  flex: 1;
  min-width: 300px;
}

.role-list {
  height: calc(100vh - 200px);
  overflow-y: auto;
}

.role-item {
  width: 100%;
  padding: 4px 6px;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s;
}

.role-item:hover {
  background-color: #f0f0f0;
}

.role-item-active {
  background-color: #e6f7ff;
  color: #1890ff;
  font-weight: bold;
}
</style>
